import React, { Component } from 'react';
// import { Button, notification,Form,Spin,Input,Row, Tooltip } from "antd";
import { TooltipHost, IconButton, Stack, TextField, Label, PrimaryButton, MessageBar, MessageBarType, initializeIcons} from 'office-ui-fabric-react';
import { Form } from '@fluentui/react-northstar'
import {vscode} from './coursePage'
initializeIcons();


const iconProps = { iconName: 'Info' };

const rootStyles = {
    root: {
        // width: '100%',
    }
}

const stackStyles = {
    root:{
        width: '70%',
        maxWidth: 800,
        margin: '0 auro 70px'
    }
}

const stackTokens = {
    childrenGap: 10,
};

const labelStyles = {
    width: '100%',
    height: 40,
    fontSize:24,
    textAlign: 'center',
    background: '#3095d2',
    color: '#fff'
}

const ErrorMessage = p => (
    <MessageBar
        messageBarType={MessageBarType.error}
        isMultiline={false}
        onDismiss={p.closeErrorMessage}
        dismissButtonAriaLabel="Close"
    >
      Error MessageBar with single line, with dismiss button.
    </MessageBar>
);

const SuccessExample = p => (
    <MessageBar
        messageBarType={MessageBarType.success}
        isMultiline={false}
        onDismiss={p.closeSuccessMessage}
        dismissButtonAriaLabel="Close"
    >
      Success MessageBar with single line and action buttons.
    </MessageBar>
);



export default class ImageMaker extends Component {
	constructor(props) {
		super(props)
		this.state = {
            scenarioIndex: 0,
            loading: false,
            scenarios: [],
            error: false,

            registryServer: 'registry.cn-hangzhou.aliyuncs.com',
            registryAccount: 'gd@tongjo.com',
            registryPassword: '123456gd',
            dockerServerHost: 'http://docker.kfcoding.com:20375/v1.24',
            dockerServerVersion: '1.24',
            imageFullName: '',
            
		}
	}

    componentWillReceiveProps(nextProps){
        if(nextProps.courseJson.scenarios){
            this.setState({
                ...nextProps.courseJson
            },()=>{
                console.log(this.state)
            })
        }
    }

    closeSuccessMessage = () =>{
        this.setState({
            success: !this.state.success
        })
    }

    closeErrorMessage = () => {

    }
    
    getValues = () => {
        const { registryServer, registryAccount, registryPassword, dockerServerHost, dockerServerVersion, imageFullName  } = this.state
        const values = {
            registryServer: registryServer,
            registryAccount: registryAccount,
            registryPassword: registryPassword,
            dockerServerHost: dockerServerHost,
            dockerServerVersion: dockerServerVersion,
            imageFullName: imageFullName
        }

        console.log('in getvalues', values)

        for(let key in values){
            if(values[key] === ''){
                return 'error'
            }
        }
        return values
    }

    onClickPreviewBtn=()=>{
        vscode.postMessage({
            command: 'openExternalUrl',
            data: 'http://gitcourse.kfcoding.com/#'+this.state.gitRepo,
          })
    }

	render() {
        const {  scenarioIndex, scenarios, loading, error } = this.state;
        const { registryServer, registryAccount, registryPassword, dockerServerHost, dockerServerVersion, imageFullName  } = this.state
        

		return (
            <Stack horizontalAlign='center' styles={rootStyles} >
                { error && < ErrorMessage closeMessage={this.closeMessage}/>}
                <Label style={labelStyles} >镜像仓库</Label>
                <Stack styles={stackStyles} tokens={stackTokens} >
                    <TextField 
                        label={
                            <span>git仓库地址&nbsp;
                                <TooltipHost
                                    content="例如:https://gitee.com/you/your-repo.git"
                                >
                                    <IconButton
                                        iconProps={iconProps}
                                        title="Info"
                                    />
                                </TooltipHost>
                            </span>
                        }  
                        onChange={e => this.setState({gitRepo: e.target.value})}
                    />
                  
                </Stack>
               
                <Stack styles={stackStyles} tokens={stackTokens}>
                {
                    loading?
                    (<Label tip="提交中"/>):
                    (
                        <PrimaryButton onClick={this.onClickPreviewBtn}>
                        预览
                        </PrimaryButton>
                    )
                }
                </Stack>
            </Stack>
		)

	}
}


